{% extends "base.html" %}

{% block content %}
<div class="page-title">
    <h3>在下方输入要删除的采购明细的编号：</h3>
</div>
<div class="form-container">
    <form id="delete-purchase-detail-form">
        <!-- Input field for deleting PurchaseDetail -->
        <label for="purchase_detail_id">采购明细编号：</label>
        <input type="number" id="purchase_detail_id" name="purchase_detail_id" class="input-field" required><br>
        <div class="button-container">
            <button type="submit" class="login-button">删除</button>
            <button type="reset" class="login-button" style="background-color: grey;">重置</button>
        </div>
    </form>
</div>

<script>
    document.getElementById('delete-purchase-detail-form').addEventListener('submit', function(event) {
        event.preventDefault();

        var purchaseDetailId = document.getElementById('purchase_detail_id').value;
        if (purchaseDetailId) {
            if (confirm('是否确定删除？')) {
                fetch(`/api/purchase_details/${purchaseDetailId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    if (response.ok) {
                        alert('采购明细删除成功');
                        this.reset();
                    } else {
                        response.json().then(data => {
                            alert('删除采购明细失败: ' + data.error);
                        });
                    }
                }).catch(error => {
                    console.error('Error:', error);
                    alert('删除采购明细失败');
                });
            }
        } else {
            alert('请输入采购明细编号');
        }
    });

    document.querySelector('button[type="reset"]').addEventListener('click', function(event) {
        if (!confirm('是否确定重置已输入信息？')) {
            event.preventDefault();
        }
    });
</script>
{% endblock %}
